<template>
  <div class="logistics-page">
    <h1>物流信息</h1>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <div class="order-info">
        <p><strong>订单号：</strong>{{ orderNumber }}</p>
        <p><strong>物流公司：</strong>{{ logisticsCompany }}</p>
        <p><strong>物流单号：</strong>{{ trackingNumber }}</p>
      </div>
      <div class="logistics-timeline">
        <h2>物流跟踪</h2>
        <ul>
          <li v-for="(event, index) in logisticsEvents" :key="index" class="timeline-item">
            <div class="timeline-date">{{ event.date }}</div>
            <div class="timeline-content">
              <p>{{ event.description }}</p>
              <p class="timeline-location">{{ event.location }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const orderId = route.params.id;
const orderNumber = ref('');
const logisticsCompany = ref('');
const trackingNumber = ref('');
const logisticsEvents = ref([]);
const loading = ref(true);
const error = ref(null);
const fetchLogisticsInfo = async (id) => {
  try {
    // 目前使用的是模拟数据
    const response = {
      orderNumber: `OD${id}`,
      logisticsCompany: '快递公司',
      trackingNumber: `KD${id}`,
      events: [
        {
          date: '2023-05-10 18:30',
          description: '包裹已签收，签收人：张三，感谢使用快递服务',
          location: '北京市朝阳区'
        },
        {
          date: '2023-05-10 09:15',
          description: '快递员正在派送途中，请保持电话畅通',
          location: '北京市朝阳区'
        },
        {
          date: '2023-05-09 20:30',
          description: '包裹已到达北京市朝阳区配送中心',
          location: '北京市朝阳区'
        },
        {
          date: '2023-05-08 10:00',
          description: '包裹已发出',
          location: '广州市白云区'
        }
      ]
    };
    // 需要实现:
    // 1. 对接真实物流 API
    // 2. 实时更新物流状态
    // 3. 物流异常处理
    orderNumber.value = response.orderNumber;
    logisticsCompany.value = response.logisticsCompany;
    trackingNumber.value = response.trackingNumber;
    logisticsEvents.value = response.events;
  } catch (err) {
    error.value = '获取物流信息失败';
  }
};
onMounted(() => {
  fetchLogisticsInfo(orderId);
});
</script>
<style scoped>
.logistics-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.order-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.logistics-timeline {
  margin-top: 30px;
}
.timeline-item {
  display: flex;
  margin-bottom: 20px;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 120px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
}
.timeline-date {
  width: 120px;
  padding-right: 20px;
  text-align: right;
  font-weight: bold;
}
.timeline-content {
  flex: 1;
  padding-left: 20px;
  position: relative;
}
.timeline-content::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4caf50;
}
.timeline-location {
  color: #666;
  font-size: 0.9em;
}
</style>
